<template>
  <div class="item" :class="{active:isActive || result}" @click="titleClick">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "NavBarItem",
    props:{
      link:{
        type:String,
      },
    },
    data(){
      return{
        // 1.在搜索页用到这个组件时注意默认值有两种情况，一是直接网页刷新，此时传入的中文参数会被解析成乱码,用encodeURL解析成同种类型才可判断
        //二是从主页或者哪里进入时，就是正常中文参数，不是乱码类型
        result:encodeURI(this.link).indexOf((this.$route.path)) !== -1 || this.link.indexOf((this.$route.path)) !== -1
      }
    },
    computed:{
      isActive(){
        return this.link.indexOf(this.$route.path) !== -1
      },
    },
    watch: {
      // 2.搜索下一首歌时切换路由，更新result状态
      '$route' (to, from) {
        this.result = this.link.indexOf(this.$route.path) !== -1
      }
    },
    methods:{
      titleClick(){
        this.$router.replace(this.link)
        // 3.点击导航切换路由更新result状态
        this.result = this.link.indexOf(this.$route.path) !== -1
      },
    }
  }
</script>

<style scoped>
  .item{
    height: 37px;
    line-height: 37px;
    color: #2a2727;
    padding: 0 10px;
    margin: 2px 10px;
    cursor: pointer;
    font-size: 14px;
  }
  .active{
    font-size: 16px;
    font-weight: 550;
    border-bottom: 2px solid #bbbbf1;
  }
</style>
